<template>
  <div class="InspectionList">
    <NavBar fixed placeholder title="专项督办" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#333333"
          @click="$router.push('/home/work')"
        />
      </template>
      <template #right>
        <Icon
          name="plus"
          size="0.53rem"
          color="#333333"
          @click="$router.push('addSupervisory')"
        />
      </template>
    </NavBar>
    <!-- tab栏 -->
    <Tabs class="tabList" v-model="activeName">
      <Tab title="待处理" name="0"></Tab>
      <Tab title="已完成" name="1"></Tab>
    </Tabs>
    <Search
      class="search"
      v-model="search"
      background="#e1e1e1"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    />

    <!-- 列表 -->
    <PullRefresh v-model="isLoading" @refresh="onRefresh" class="refresh">
      <List
        class="list"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="item" v-for="(item, i) in list" :key="i">
          <div class="item-box" @click="toJump(item)">
            <div class="row">
              <div class="title flex">
                <div class="placeholder"></div>
                <span>任务督办编号</span>
                <span class="id">{{ item.rssId }}</span>
              </div>
              <div class="state">{{ item.state }}</div>
            </div>
            <div class="row row1">
              <div class="name">{{ item.rssName }}</div>
            </div>
            <div class="row2">
              <div class="cell">
                <span>责任人</span>
                <div class="type">{{ item.executor }}</div>
              </div>
              <div class="cell">
                <span>责任部门</span>
                <div class="type">{{ item.departName }}</div>
              </div>
              <div class="cell">
                <span>任务截至时间：</span>
                <div class="type">{{ item.endDtm }}</div>
              </div>

              <!-- <div class="cell">
              <span>执行人：{{ item.pointPerson }}</span>
              <div class="type">执行时间：{{ item.claimTime }}</div>
            </div> -->
            </div>
            <div class="user">{{ item.taskState }}</div>
          </div>
        </div>
      </List>
    </PullRefresh>
  </div>
</template>

<script>
import { overseeList, SubmitTheClaim } from "@/api/work";
import {
  Tabs,
  Tab,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
  Checkbox,
  CheckboxGroup,
  Search,
  PullRefresh,
} from "vant";
export default {
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      show: false,
      activeName: "0",
      result: [],
      search: "",
      pageNum: 1,
      pageSize: 10,
      jumpFlag: true,
      isLoading: false,
      upNo: "",
    };
  },
  computed: {
    ectNoStr() {
      return this.result.join(",");
    },
  },
  created() {
    // if (this.$route.query.state) {
    //   this.activeName = this.$route.query.state;
    // }
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName;
      this.jumpFlag = false;
    }
  },
  mounted() {},
  watch: {
    activeName() {
      if (this.jumpFlag) {
        this.pageNum = 1;
        this.list = [];
        this.onLoad();
      } else {
        this.jumpFlag = true;
      }
    },
  },
  methods: {
    async onLoad() {
      let a = this.$toast.loading({
        message: "请求中...",
        duration: 0,
      });
      const res = await overseeList({
        sign: this.activeName,
        orgNo: localStorage.getItem("orgNo"),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        rssName: this.search,
      });
      this.upNo = res.param.upNo;
      let value = res.value;
      console.log(value);
      a.clear();
      this.list.push(...value);
      this.loading = false;
      if (this.list.length < this.pageSize * this.pageNum) {
        this.finished = true;
      }
      this.pageNum++;
    },
    toJump(item) {
      // return console.log(this.upNo);
      this.$router.push({
        path: "SupervisoryDetails",
        query: { rssNo: item.rssNo, upNo: this.upNo },
      });
    },
    reset() {
      this.stateList.forEach((v) => {
        v.state = false;
      });
      this.user = "";
      this.phone = "";
      this.startTime = "";
      this.endTime = "";
    },
    ok() {},
    onSearch() {
      this.pageNum = 1;
      this.onLoad();
    },
    onCancel() {
      this.search = "";
      this.pageNum = 1;
      this.onLoad();
    },
    async onSubmit() {
      if (this.result.length <= 0) return;
      await SubmitTheClaim({
        ectNos: this.ectNoStr,
      });
      this.activeName = "b";
    },
    async onRefresh() {
      this.pageNum = 1;
      this.finished = false;
      this.list = [];
      // await this.onLoad();
      this.isLoading = false;
    },
  },
  components: {
    Checkbox,
    CheckboxGroup,
    Tabs,
    Tab,
    NavBar,
    Button,
    Popup,
    Icon,
    Field,
    List,
    Cell,
    Search,
    PullRefresh,
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";
.InspectionList {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  /deep/ .van-tabs__line {
    background-color: @primary;
  }
  .item {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    margin-top: 20px;
    background-color: #fff;
    .item-check {
      padding: 0 40px;
    }
    .item-box {
      width: 100%;
    }
    .user {
      height: 70px;
      background-color: @primary;
      padding: 0 30px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      border-bottom: 1px solid #eee;

      .title {
        font-size: 32px;
        font-weight: 700;
        .placeholder {
          width: 5px;
          height: 30px;
          background: @primary-linear;
          margin: 0 20px;
        }
        .id {
          margin-left: 20px;
          font-weight: 500;
          margin-left: 20px;
          font-size: 28px;
          font-family: PingFang SC;
          color: #666666;
        }
      }
      .state {
        margin-right: 20px;
        width: 132px;
        height: 44px;
        // background-color: #dcf4e4;
        border-radius: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        // color: #04b33e;
        color: @primary;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
    .row1 {
      justify-content: start;
      font-size: 28px;
      color: #999999;
      padding: 0 30px;
      .icon {
        margin-right: 0 20px;
        font-size: 35px;
      }
      .name {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #696d73;
      }
    }
    .row2 {
      // height: 144px;
      display: flex;
      flex-flow: column;
      font-size: 28px;
      color: #999999;
      padding: 0 30px;
      .cell {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0px;
        // height: 70px;
      }
    }
  }
  .Popup {
    .task {
      border-bottom: 1px solid #a7a7a7;
    }
    .title {
      padding: 15px;
      font-size: 28px;
      color: #a7a7a7;
    }
    .state {
      display: flex;
      //   justify-content: space-between;
      flex-direction: row;
      font-size: 26px;
      color: #6e6e6e;
      flex-wrap: wrap;
      .state-item {
        width: 33%;
        height: 74px;
        .btn {
          width: 157px;
          height: 58px;
          background-color: #f6f6f6;
          border-radius: 4px;
          color: #6e6e6e;
        }
        .change {
          border: 2px solid #c6a86f;
        }
      }
    }
    .ipt {
      width: 90%;
      height: 58px;
      text-indent: 1em;
      font-size: 24px;
      margin-left: 20px;
      background-color: #f6f6f6;
    }
    .ipt1 {
      width: 40%;
      height: 58px;
      text-indent: 1em;
      font-size: 24px;

      background-color: #f6f6f6;
    }
    .placeholder1 {
      width: 60px;
      height: 58px;
      color: #3982f6;
    }
    .btn-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      margin-bottom: 40px;
      .ok {
        width: 157px;
        height: 58px;
        background-color: #3982f6;
        border-radius: 4px;
        color: #fff;
        margin-left: 50px;
      }
      .reset {
        width: 157px;
        height: 58px;
        background-color: #dddddd;
        border-radius: 4px;
        color: #6e6e6e;
      }
    }
  }
  .btn {
    height: 98px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  .tabList {
    position: fixed;
    top: 92px;
    width: 100%;
    z-index: 99;
  }
  .search {
    position: fixed;
    width: 100%;
    // top: 180px;
    margin-top: 90px;
    z-index: 99;
  }
  .list {
    // margin-top: 220px;
  }
  .searchPlaceholder {
    height: 90px;
  }
  .refresh {
    margin-top: 180px;
  }
}
</style>
